<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .header{
            height: 68px;
            background: green;
        }
        .banner{
            height: 516px;
            width: 1212px;
            background: red;
            margin: 26px auto 26px;
        }
        .ma{
            width: 1212px;
            height: 37px;
            margin: 0px auto 26px;
            background: yellow;
        }
        .banner .nn{
            width: 910px;
            float: left;
        }

        .banner .mm li{
            width: 290px ;
            height: 163px;
            margin-bottom: 12px;
            background: pink;
            list-style: none;
            float: right;
            position: relative;
        }
        .banner .mm li p{
            position: absolute;
            color: white;
            top: 140px;
            left: 0px;
        }
        .banner .mm li img{
            width: 290px;
            height: 163px;
            width: 100%;
        }

        .header span{
            width: 100px;
            height: 45px;
            margin: 15px auto 10px;
            float: left;
            padding-right: 500px;
        }
        .header .aa li{
            width: 35px;
            height: 45px;
            float: left;
            border-radius: 50%;
            list-style: none;
            margin:  5px auto 30px ;
            padding-left: 20px;
            background-color: yellow;
            padding-top: 15px;
        }
        .mb{
            width: 1212px;
            height: 1300px;
            background:silver ;
            margin: 0px  auto 35px;
        }
        .mc{
            width: 1212px;
            height: 37px;
            background: white;
            margin: 0px auto 25px;
        }
        .mc p{
            margin: 15px auto 20px;
            padding-left: 500px;
        }
        .ma select{
            margin: 10px;
        }
        .mb img{
            width: 303px;
            height: 207px;
            margin-bottom: 10px;
            float: left;

           
        }
        .mb div{
            width: 307px;
            height: 327px;
            float: left;
        }
  
        </style>
    </head>
    <body>
        <div class="header">
            <span class="bb">三</span>
            <ul class="aa">
                <li>哈</li>
                <li>赞</li>
                <li>艹</li>
                <li>买</li>
            </ul>      
            
        </div>
        <div class="banner">
            <img src="images/s003.jpg" alt="" class="nn" width="910px" height="516px">
            <ul class="mm">
                <li><img src="images/s02.jpg" alt="">
                <p>想点亮圣诞气氛？</p>
                </li>
                <li><img src="images/s03.jpg" alt="">
                <p>designer100</p>
                </li>
                <li><img src="images/s04.jpg" alt="">
                <p>旧椅子获新生</p>
                </li>
            </ul>
        </div>
        <ul class="ma">
            <select name="最新" id="1">
                <option value="最新">最新</option>
            </select>
            <select name="最热" id="">
                <option value="最热">最热</option>
            </select>
            <select name="热议" id="">
                <option value="热议">热议</option>
            </select>
            <select name="随机" id="">
                <option value="随机">随机</option>
            </select>
        </ul>
        <ul class="mb">
            <div><li><img src="images/i01.jpg" alt="">
            <p>用水才能擦去笔迹，它只想保护和设计师的创意</p></li>
            </div>
            <div><li><img src="images/i02.jpg" alt="">
            <p>马桶刷也要有优雅的姿态</p>
            </li></div>
            <div><li><img src="images/i03.jpg" alt="">
            <p>健身也走【科技范】，你以为这仅仅只是个瑜伽垫？</p>
            </li></div>
            <div><li><img src="images/i04.jpg" alt="">
            <p>牙缝清洁怎么办？牙签牙线都过时了，用【刷子】刷吧</p>
            </li></div>
            <div><li><img src="images/i05.jpg" alt="">
            <p>矮怎么了？照样能够拿到书架顶端的书</p>
            </li></div>
            <div><li><img src="images/i06.png" alt="">
            <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</p>
            </li></div>
            <div><li><img src="images/i07.jpg" alt="">
            <p>中国国际设计pk世界工业设计大会，哪个更棒？</p>
            </li></div>
            <div><li><img src="images/i08.png" alt="">
            <p>首届世界工业设计大会开在家门口杭州，这个设计师躁起来</p>
            </li></div>
            <div><li><img src="images/i09 (2).jpg" alt="">
            <p>窝在北方的被窝里，你应该需要这样一个散热阀门</p>
            </li></div>
            <div><li><img src="images/i10 (2).jpg" alt="">
            <p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
            </li></div>
            <div><li><img src="images/i11 (2).jpg" alt="">
            <p>依靠在毯子上，这件事听着让人舒坦</p>
            </li></div>
            <div><li><img src="images/i12.jpg" alt="">
            <p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就变
            </p></div>
            </li>
        </ul>
        <div class="mc"><p >太快了吧，慢慢来:)</p></div>
    </body>
</html>